/**
 * 管理员词库模块页面
 * @author 韩睿倩
 */
<template>
  <div>
    <el-card>
      <el-row :gutter="30">
        <el-col :span="16">
          <!-- 搜索框 -->
          <el-input type="text" placeholder="请输入内容" v-model="wordSpell">
            <el-button slot="append" icon="el-icon-search" @click="searchWord(wordSpell)"></el-button>
          </el-input>

        </el-col>
        <el-col :span="8">

          <el-button type="primary" @click="dialogVisible = true">添加单词</el-button>

        </el-col>
      </el-row>
    </el-card>
    <!-- 添加单词对话框 -->


    <el-dialog title="添加单词" :visible.sync="dialogVisible" width="30%" @close="addClose">
      <!-- 添加单词表单 -->
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="单词" prop="wordSpell">
          <el-input v-model="ruleForm.wordSpell"></el-input>
        </el-form-item>
        <el-form-item label="中文释义" prop="paraphrase">
          <el-input v-model="ruleForm.paraphrase"></el-input>
        </el-form-item>
        <el-form-item label="音标" prop="soundmark">
          <el-input v-model="ruleForm.soundmark"></el-input>
        </el-form-item>


      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAddWord">取 消</el-button>
        <el-button type="primary" @click="AddWordSuccess">确 定</el-button>
      </span>
    </el-dialog>




    <!-- 单词展示 -->
    <el-table :data="tableData" border>
      <el-table-column prop="wordId" label="wordId" width="180">
      </el-table-column>
      <el-table-column prop="wordSpell" label="单词" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="checkWordInfo(scope.$index, scope.row)">查看信息</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { getWordAdmin, addWord } from "../../api/administrator/thesaurusModuleApi"
export default {
  inject: ["reload"],
  name: "thesaurusModule",
  data() {
    return {
      wordSpell: "",
      tableData: [],
      dialogVisible: false,
      ruleForm: {
        wordSpell: "",
        paraphrase: "",
        soundmark: ""
      },
      rules: {
        wordSpell: [
          { required: true, message: '请输入单词', trigger: 'blur' },
          
        ],
        paraphrase: [
          { required: true, message: '请输入中文释义', trigger: 'blur' },
          
        ],
        soundmark: [//格式待定
          { required: true, message: '请输入音标', trigger: 'blur' },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      }
      // tableData: [
      //   {
      //   wordId: '',
      //   wordSpell: "",
      // }
      // ],
    };
  },

  methods: {
   

    //查找单词
    searchWord(wordSpell) {
      console.log(wordSpell)
      // wordSpell = this.wordSpell
      getWordAdmin(wordSpell)
        .then((res) => {
          console.log(res);
          if (res.resultCode == 200) {
            this.$message.success('查找单词成功')
            this.tableData = [res.data]
          }
          else if (res.resultCode == 400) {
            this.$message.error('未找到单词')
          }
          // this.tableData.wordId = res.data.wordId
          // this.tableData.wordSpell = res.data.wordSpell
        }).catch((err) => {
          console.log(err);
        });
    },
    checkWordInfo(index, tableData) {
      tableData = this.tableData;
      console.log("checkInfo success");
      // console.log((tableData[index].userId).toString());
      this.$store.dispatch("getWordIdAdmin", tableData[index].wordId); //传递wordId到全局变量,并且可以通过computed获取
      // this.$store.dispatch(tableData[index].userId);
      tableData[index].wordId = (tableData[index].wordId).toString()
      this.$router.push({
        path: "/administratorHome/wordInfoPage"
      });
    },
    cancelAddWord() {
      this.dialogVisible = false;
      //待优化，输入历史刷新
    },
    //监听表单
    addClose() {
      this.$refs.ruleForm.resetFields()
    },

    AddWordSuccess() {
      
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log("格式通过验证")
          
          addWord(this.ruleForm).then((res) => {
            console.log(res)
            
            if (res.resultCode == 200) {
              this.$message.success('添加单词成功')
              console.log("添加成功")
              console.log(res)
              this.reload()
            }
            else if (res.resultCode == 400) {
              this.$message.warning('单词已存在')
              // console.log(this.ruleForm.wordSpell)
              // this.searchWord(this.ruleForm.wordSpell)


              // console.log(data)
              // this.$store.dispatch("getWordIdAdmin", tableData[index].wordId);
              // this.$router.push({
              //   path: "/administratorHome/wordInfoPage",
              //   query:''
              // });
            }

          }).catch((err) => {
            console.log("添加失败")
            console.log(err)
          })

        } else {
          console.log("格式不正确");
          this.$message.error('输入内容不完整')
          return false;
        }
      })

      //弹框显示添加成功
      this.dialogVisible = false;
    }
  },

}
</script>

<style lang="scss">
.el-card {
  margin: 30px;
  align-items: center;
}

.el-table {
  // margin: 30px;
  width: 1000px;
  font-size: 17px;
  align-items: center;
  justify-content: center;
  margin: auto;
  margin-top: 20px;
}
</style>
<style lang="scss">
.el-descriptions__title {
  font-size: 25px;
  font-weight: 700;
}

.el-card__body {
  padding: 40px;
}
</style>